<div id="toast-templates" style="display: none;">
  <div id="toast-template-success" class="toast success_toast bg-light" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000" style="display: flex;align-items: center;">
    <div class="toast-header bg-dark">
      <strong class="text-white">Success</strong>
    </div>
  </div>

  <div id="toast-template-failure" class="toast failure_toast bg-light" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000" style="display: flex;align-items: center;">
    <div class="toast-header bg-danger">
      <strong class="text-white">Failure</strong>
    </div>
  </div>
</div>

<div aria-live="polite" aria-atomic="true" style="position: fixed; min-height: 0px; z-index: 999999999 !important;">
  <div class="d-flex flex-column" id="toast-container" style="position: fixed; top: 20px; left: 40%;">
  </div>
</div>
<div id="change-password-form" class="d-flex flex-column horizontal-expand mb-3">
  <div class="container-fluid d-flex justify-content-center bg-primary">
    <h3 class="py-2">Change Password</h3>
  </div>
  <div class="d-flex flex-column horizontal-expand justify-content-between">

  <div class="d-flex justify-content-start horizontal-expand bg-light m-1">
    <div class="p-2"><%= 'For your security, we enforce a password change at first login. This way only you have access to your password (we only store a salted, hashed version of it). Keep in mind it is always possible that this open-source software was modified to log your password. ' if @first_login %>For best security, use a password manager (like LastPass), and always generate a long, unique, random password for every account.</div>
  </div>

  <!-- Password -->
  <div class="d-flex justify-content-start horizontal-expand bg-light m-1">
    <div class="p-2 col-1">New Password</div>
    <div class="p-2 col-3">
      <input id="user_password_input" type="password" class="form-control" placeholder="Your password" autocomplete="new-password">
    </div>
  </div>

  <div class="d-flex justify-content-start horizontal-expand bg-light m-1">
    <div class="p-2 col-1">New Password (again)</div>
    <div class="p-2 col-3">
      <input id="user_password_second_input" type="password" class="form-control" placeholder="Your password" autocomplete="new-password">
    </div>
  </div>

  <div class="d-flex justify-content-start horizontal-expand bg-light m-1">
    <div class="p-2 col-3">
      <button id="change-password-input" class="btn btn-info horizontal-expand mr-4" onclick="changePassword('<%= @destination %>');">Change Password</button>
    </div>
  </div>
</div>

<!-- Login-specific -->
<script>
  $("#change-password-form").keyup(function(event) {
    if (event.keyCode === 13) {
      $("#change-password-input").click();
    }
  });
</script>
